<template>
	<view class="page-content">
		<view class="card">
			<view class="title"> {{title}}</view>
			<view class="sub-title" style="margin-top: 13rpx;"> 上传视频文件({{videoNum}}/1)</view>
			<view class="add">
				<image class="add-icon" :src="require('@/static/images/add.png')" @click="chooseFile('1')"></image>
			</view>
			<view class="tips"> 仅支持上传：mp4格式</view>
			<view class="video-box">
				<image class="close-icon" :src="require('@/static/images/close.png')" @click="del('1')"></image>
				<video class="video" id="myVideo" :src="videoUrl" @error="videoErrorCallback" controls>
				</video>
			</view>
		</view>
		<view class="card" style="margin-top: 14rpx;">
			<view class="sub-title"> 上传音频文件({{audioNum}}/1)</view>
			<view class="add">
				<image class="add-icon" :src="require('@/static/images/add.png')" @click="chooseFile('2')"></image>
			</view>
			<view class="tips"> 仅支持上传：mp4格式</view>
			<view class="video-box">
				<image class="close-icon" :src="require('@/static/images/close.png')" @click="del('2')"></image>
				<!-- <audio class="audio" style="text-align: left" :src="videoUrl" :poster="poster" controls></audio> -->
				<video class="video" id="myVideo" :src="videoUrl" @error="videoErrorCallback" controls>
				</video>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String
			}
		},
		data() {
			return {
				videoNum: 0,
				videoUrl: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
				audioNum: 0,
				audioUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
				poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
			}
		},
		methods: {
			/* 
			 * type  string 上传文件类型 1: MP4 ,2: MP3 
			 */
			chooseFile(type) {
				//#ifdef MP-ALIPAY
				my.chooseVideo({
					sourceType: ['album', 'camera'],
					maxDuration: 60,
					camera: 'back',
					success(res) {
						console.log(res.tempFilePath)
					}
				})
				//#endif
				//#ifdef MP-WEIXIN
				uni.chooseFile({
					count: 1, //默认100
					extension: ['.mp4'],
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
				//#endif
			},
			/* 
			 * 删除上传文件
			 * type  string 上传文件类型 1: MP4 ,2: MP3 
			 */
			del(type) {
				alert(type)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgba(248, 248, 248, 1);
	}

	.page-content {
		padding: 18rpx 22rpx 0;

		.card {
			padding: 44rpx 30rpx 66rpx;
			background: #fff;
			;
			border-radius: 20rpx;

			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
			}

			.sub-title {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #CCCCCC;
				line-height: 40rpx;
			}

			.add {
				width: 146rpx;
				height: 137rpx;
				background: #F9F9F8;
				border: 1rpx solid rgba(228, 228, 228, 0.48);
				border-radius: 10rpx;
				margin-top: 40rpx;
				margin-bottom: 76rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.add-icon {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.tips {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 40rpx;
			}

			.video-box {
				.video {
					width: 100%;
					height: 259rpx;
					margin-top: 28rpx;
					border-radius: 15rpx;

					/deep/.uni-video-cover-play-button {
						background: url('@/static/images/play.png');
						background-size: contain;
					}

					/deep/.uni-video-cover-duration {
						display: none;
					}
				}

				// 音频组件样式（无用）
				.audio {
					width: 100%;
					height: 259rpx;
					margin-top: 28rpx;
					border-radius: 15rpx;

					/deep/.uni-video-cover-play-button {
						background: url('@/static/images/play.png');
						background-size: contain;
					}

					/deep/.uni-audio-right {
						display: none;
					}
				}

				.close-icon {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					right: 44rpx;
					z-index: 99;
					margin-top: 16rpx;
				}

			}
		}
	}
</style>
